<template>
	<view class="wf-item-page">
		<!-- <image :src="item.image" mode="" class="item-img" /> -->
		<!-- <x-img width="360rpx" height="240rpx" :src="item.image"></x-img> -->
		<u-image class="item-img" width="100%" height="420rpx" :src="item.image" :lazy-load="true" radius="10rpx">
			<template v-slot:loading>
				<u-loading-icon color="red"></u-loading-icon>
			</template>
		</u-image>
		<!-- <image :src="item.avatar" mode="aspectFill" class="info-avatar"/> -->
		<view class="info-nickname u-line-2">{{ item.title }}</view>
		<image src="/static/paly.png" mode="" class="video" v-if="item.is_video==1"></image>
	</view>
</template>

<script>
	// import xImg from '@/components/x-img/x-img.vue'
	export default {
		// components: {
		// 	xImg
		// },
		props: {
			item: {
				type: Object,
				require: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wf-item-page {
		background: #fff;
		overflow: hidden;
		border-radius: 5px;
		position: relative;
		padding-bottom: 37rpx;

		.video {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 14rpx;
			right: 17rpx;
		}
	}

	.item-img {
		width: 360rpx;
		height: 420rpx;
	}

	// .item-info {
	//     display: flex;
	//     align-items: center;
	// }

	.info-avatar {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.info-nickname {
		padding: 5px 0 0rpx 13rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.87);
		// 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
		display: -webkit-box;
		// 设置或检索伸缩盒对象的子元素的排列方式 。
		-webkit-box-orient: vertical;
		// 用省略号“…”隐藏超出范围的文本 。
		text-overflow: ellipsis;
		overflow: hidden;
		//用来限制在一个块元素显示的文本的行数。
		-webkit-line-clamp: 2;
		line-height: 38rpx;
		// word-wrap: break-word;
		word-break: break-all; //断开所有单词
		// white-space: pre-line;


	}
</style>